<template>
    <div v-cloak class="film" v-if="film">
        <myhead :title="$route.query.name" :back="true" ></myhead>
        <div class="film-top" >
            <img  class="film-img" :src="film.poster" alt="">
        </div>
        <div class="film-detail">
            <div class="film-one">
                <div class="left">
                    <h3>{{film.name}}</h3>
                    <p>{{film.item.name}}</p>
                </div>
                <p class="right">{{film.grade}} 分</p>
            </div>
            <p>
                {{film.category}}
            </p>
            <p>{{film.premiereAt *1000 | dateFormat }} 上映</p>
            <p>
                {{film.nation}} | {{film.runtime}} 分钟
            </p>
            <div class="text-box">
                <div class="film-text" ref="text" >
                     {{film.synopsis}}
                </div>
                <div class="whitebox" ref="height" v-if="toggle"  >  {{film.synopsis}} </div>
                <van-icon  :name="!flag?'arrow-down':'arrow-up'" @click="toggleclick" class="down" />
            </div>
        </div>
        <div class="actors">
            <p class="actors-title-bar">演职人员</p>
            <div class="actor-list">
                <div class="actor-box">
                    <div class="item" v-for="(l,i) in film.actors" :key="i">
                        <img :src="l.avatarAddress" alt="">
                        <p>{{l.name}}</p>
                        <span>{{l.role}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="photo">
            <div class="photo-top">
                <p>剧照</p>
                <p class="all" @click="show=true">全部({{film.photos.length}})</p>
            </div>
            <div class="photo-list">
                <div class="list-box">
                     <img @click="showPhoto(l,i)" v-for="(l,i) in film.photos"  class="img-item"  :key="i" :src="l" alt="">
                </div>
            </div>
        </div>
        <van-button class="goSchedule" @click.stop="gotobuyticket(film)">购票</van-button>
        <van-popup :closeable="true" v-model="show" round position="bottom" :style="{ height: '80%' }" >
            <div class="showmore">
                <p>剧照({{film.photos.length}})</p>
                <div class="mylist">
                    <div class="item" v-for="(l,i) in film.photos" :key="i">
                        <img :src="l" style="height:128px;" alt="">
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import {ImagePreview} from "vant"
export default {
    data(){
        return {
            film:null,
            flag:false,
            height:null,
            toggle:true,
            show:false
        }
    },
    methods:{
        gotobuyticket(l){
            this.$router.push({name:'film-cinema',params:{filmId:l.filmId},query:{name:l.name}})
        },
        toggleclick(){
            
            this.flag = !this.flag;
            this.$refs.text.style.height = this.flag ?  this.height : '32px'
        },
        showPhoto(l,i){
            ImagePreview({
                images: this.film.photos,
                startPosition: i
            });
        }
    },
    mounted(){
        this.$ajax.getmaizuo({
            filmId:this.$route.params.filmId
        },{
            'X-Host': 'mall.film-ticket.film.info'
        })
        .then(res=>{
            this.film = res.data.data.film;
            this.$nextTick(()=>{
                console.log(this.$refs.height.offsetHeight)  // 求高度
                this.height = this.$refs.height.offsetHeight + 'px'
                this.toggle = false;
            })

        })


    }
}
</script>
<style lang="scss" scoped>
.showmore{
    margin-top:40px;
    width:100%;
    p{
        text-align: center;
    }
    .mylist{
        margin-top:20px;
        display: flex;
        width:100%;
        flex-wrap: wrap;
        .item{
            width:33%;
            img{
                width:100%;
                
            }
        }
    }
}
.film{
    position: relative;
    width:100%;
    height:100%;
    padding-bottom:50px;
    background: #e4e4e4;
    overflow: auto;
    .photo{
        background: #fff;
        margin-top:10px;
        width:100%;
        padding-bottom:20px;
        .photo-top{
            width: 100%;
            padding: 15px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            
            .all{
                font-size: 15px;
                color: #797d82;
            }
        }
        .photo-list{
            padding:0  15px;
            width:100%;
            .list-box{
                display: flex;
                overflow: auto;
            }
            .img-item{
                width:150px;
                height:100px;
                margin-right:10px;
                flex-shrink: 0;
            }
        }
    }   
    .film-detail{
        padding: 15px;
        padding-top: 12px;
        background-color: #fff;
      
        .whitebox{
            font-size: 13px;
            color: #797d82;
            margin-top:10px;
        }
        .film-text{
            font-size: 13px;
            color: #797d82;
            margin-top:10px;
            height:32px;
            overflow: hidden;
            transition: height .5s ease;
        }
        .down{
            font-size: 16px;
            color: #797d82;
            left:50%;
            transform: translateX(-50%);
        }
        .film-one{
            display: flex;
            justify-content: space-between;
            .left{
                display: flex;
                h3{
                    color:#333;
                    margin-right:4px;
                    font-size: 18px;
                }
            }
            .right{
                font-size: 18px;
                font-style: italic;
                color:#ff5f16;
            }
        }
        p{
            font-size: 13px;
            color: #797d82;
            margin-top: 4px;
        }
    }
    .actors{
        background: #fff;
        margin-top:10px;
        width:100%;
        
        .actors-title-bar{
            width: 100%;
            padding: 15px;
            font-size: 14px;
        }
        .actor-list{
            width:100%;
            padding:0 15px;
            overflow: auto;
            .actor-box{
                display: flex;
               
            }
            .item{
                margin-right:10px;
                width:110px;
                
                img{
                    width:85px;
                    height:85px;
                }
                p{
                    font-size: 14px;
                    color:#333;
                    text-align: center;
                }
                span{
                    font-size:12px;
                    color:#999;
                    text-align: center;
                    display: inline-block;
                    width:100%;
                }
            }
        }
    }
    .goSchedule{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 49px;
        width: 100%;
        text-align: center;
        background-color: #ff5f16;
        color: #fff;
        font-size: 16px;
        line-height: 49px;
    }
}
.film-top{
    width:100%;
    height:210px;
    overflow: hidden;
    position: relative;
    .film-img{
        width:100%;
        left:0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>

